<section class="category-cards py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-4">盲盒分类导航</h2>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            <!-- 食品饮料类 -->
            <div class="col">
                <div class="card h-100 border-0 shadow-sm hover-effect">
                    <div class="card-body text-center">
                        <div class="category-icon mb-3">
                            <i class="fas fa-utensils fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">食品饮料</h5>
                        <p class="card-text text-muted">甄选临期美食，品质保障</p>
                        <a href="{% url 'blindbox:list' %}?category=食品饮料" class="btn btn-outline-primary btn-sm rounded-pill px-4">探索盲盒</a>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-center text-muted">
                        <small>已售出 1820+ 盲盒</small>
                    </div>
                </div>
            </div>
            
            <!-- 日用百货类 -->
            <div class="col">
                <div class="card h-100 border-0 shadow-sm hover-effect">
                    <div class="card-body text-center">
                        <div class="category-icon mb-3">
                            <i class="fas fa-home fa-3x text-success"></i>
                        </div>
                        <h5 class="card-title">日用百货</h5>
                        <p class="card-text text-muted">生活日用品，惊喜折扣</p>
                        <a href="{% url 'blindbox:list' %}?category=日用百货" class="btn btn-outline-success btn-sm rounded-pill px-4">探索盲盒</a>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-center text-muted">
                        <small>已售出 1240+ 盲盒</small>
                    </div>
                </div>
            </div>
            
            <!-- 美妆护肤类 -->
            <div class="col">
                <div class="card h-100 border-0 shadow-sm hover-effect">
                    <div class="card-body text-center">
                        <div class="category-icon mb-3">
                            <i class="fas fa-spa fa-3x text-danger"></i>
                        </div>
                        <h5 class="card-title">美妆护肤</h5>
                        <p class="card-text text-muted">优质美妆品，实惠体验</p>
                        <a href="{% url 'blindbox:list' %}?category=美妆护肤" class="btn btn-outline-danger btn-sm rounded-pill px-4">探索盲盒</a>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-center text-muted">
                        <small>已售出 960+ 盲盒</small>
                    </div>
                </div>
            </div>
            
            <!-- 混合惊喜类 -->
            <div class="col">
                <div class="card h-100 border-0 shadow-sm hover-effect">
                    <div class="card-body text-center">
                        <div class="category-icon mb-3">
                            <i class="fas fa-gift fa-3x text-warning"></i>
                        </div>
                        <h5 class="card-title">混合惊喜</h5>
                        <p class="card-text text-muted">多品类组合，超值惊喜</p>
                        <a href="{% url 'blindbox:list' %}?category=混合惊喜" class="btn btn-outline-warning btn-sm rounded-pill px-4">探索盲盒</a>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-center text-muted">
                        <small>已售出 2150+ 盲盒</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 添加一些CSS样式 -->
<style>
    .hover-effect {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-effect:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    
    .category-icon {
        height: 80px;
        width: 80px;
        margin: 0 auto;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .card:hover .category-icon {
        transform: scale(1.1);
    }
</style> 